<template>
  <q-card >
    <q-card-section >
      <q-item>
          <q-item-section avatar class="">
            <q-icon color="blue" name="shopping_cart" size="74px"/>
          </q-item-section>

          <q-item-section>
            <q-item-label>
              <div class="text-h6">Latest Sales</div>
            </q-item-label>
            <q-item-label caption class="text-black">
              Monitoring Your products. Tracking sales, and shipping status here.
            </q-item-label>
          </q-item-section>
        </q-item>
    </q-card-section>
    <q-separator color="white"/>
    <q-card-section class="q-pa-none">
      <q-table  class="table-bg" :rows="data3" :columns="column" hide-bottom>
        <template v-slot:body-cell-Name="props">
          <q-td :props="props" style="max-width: 100px">
            <q-item>

              <q-item-section avatar>
                <q-avatar>
                  <!-- <img :src= "props.row.avatar" > -->
                    <img src= "../../assets/imgs/2.png" >
                </q-avatar>
              </q-item-section>

              <q-item-section>
                <q-item-label>{{ props.row.name }}</q-item-label>
                <q-item-label caption class="">{{ props.row.des }}</q-item-label>
              </q-item-section>
            </q-item>
          </q-td>
        </template>
        <template v-slot:body-cell-Task="props">
          <q-td :props="props">
            <q-item>
              <q-item-section>
                <q-item-label>
                    <span class="text-blue">
                      <q-icon name="bug_report" color="blue" size="20px" v-if="props.row.type=='error'"></q-icon>
                      <q-icon name="settings" color="blue" size="20px" v-if="props.row.type=='info'"></q-icon>
                      <q-icon name="flag" color="blue" size="20px" v-if="props.row.type=='success'"></q-icon>
                      <q-icon name="fireplace" color="blue" size="20px" v-if="props.row.type=='warning'"></q-icon>
                      {{ props.row.issue }}
                    </span>
                  <q-chip class="float-right text-white text-capitalize" :label="props.row.type" color="positive"
                          v-if="props.row.type=='success'"></q-chip>
                  <q-chip class="float-right text-white text-capitalize" :label="props.row.type" color="info"
                          v-if="props.row.type=='info'"></q-chip>
                  <q-chip class="float-right text-white text-capitalize" :label="props.row.type" color="warning"
                          v-if="props.row.type=='warning'"></q-chip>
                  <q-chip class="float-right text-white text-capitalize" :label="props.row.type" color="negative"
                          v-if="props.row.type=='error'"></q-chip>
                </q-item-label>
                <q-item-label caption class="">
                  <q-linear-progress dark :color="getColor(props.row.Progress)" :value="props.row.Progress/100"
                  />
                </q-item-label>
              </q-item-section>
            </q-item>
          </q-td>
        </template>
      </q-table>
    </q-card-section>
  </q-card>
</template>

<script>
import {defineComponent} from 'vue'

const column = [
  {name: 'Name', label: 'Name', field: 'name', sortable: true, align: 'left'},
  {name: 'Task', label: 'Task', field: 'task', sortable: true, align: 'left'},
];

const data3 = [
  {
    name: 'FCN',
    des: '192.168.20.167',
    Progress: 70,
    type: 'info',
    issue: '萧山工厂',
    avatar: "../../assets/imgs/2.png",

  },
  {
    name: 'BOX',
    des: '192.168.20.161',
    Progress: 60,
    type: 'success',
    issue: '萧山工厂',
    avatar: 'https://avatars2.githubusercontent.com/u/27857088?s=400&u=a898efbc753d93cf4c2070a7cf3b05544b50deea&v=4',
  },
  {
    name: 'FCNDK',
    des: '192.168.20.144',
    Progress: 30,
    type: 'warning',
    issue: '萧山工厂',
    avatar: 'https://avatars0.githubusercontent.com/u/55240045?s=400&u=cf9bffc2bd2d8e42ca6e5abf40ddd6c1a03ce2860&v=4',
  },
  {
    name: 'SMR_1',
    des: '192.168.20.146',
    Progress: 100,
    type: 'success',
    issue: '长兴工厂',
    avatar: 'https://avatars1.githubusercontent.com/u/10262924?s=400&u=9f601b344d597ed76581e3a6a10f3c149cb5f6dc&v=4',
  }
];


export default defineComponent({
  name: "TableProgress",
  setup() {

    return {
      column,
      data3,
      getColor(val) {
        if (val > 80 && val <= 100) {
          return 'orange'
        } else if (val > 60 && val <= 80) {
          return 'teal'
        }else if (val > 40 && val <= 60) {
          return 'blue'
        }
        return 'red'
      }
    }
  },

})
</script>

<style scoped>

</style>
